<template>
  <div class='sousuoPaihang'>
    <div class='titleTop'>搜索排行</div>
    <div class="content">
      <div v-for="(item,index) in paihang" :key="index" @click='paihangfun(item.city)'>
        <div>{{index+1}}.</div>
        <p class="txt">{{item.city}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SousuoPaihang',
  data () {
    return {
      paihang: [
        {
          city: '武功山',
          url: ''
        },
        {
          city: '新疆',
          url: ''
        },
        {
          city: '杭州',
          url: ''
        },
        {
          city: '上海',
          url: ''
        },
        {
          city: '西藏',
          url: ''
        },
        {
          city: '甘南',
          url: ''
        },
        {
          city: '成都',
          url: ''
        },
        {
          city: '花鸟鸟',
          url: ''
        }
      ]
    }
  },
  methods: {
    paihangfun (ele) {
      localStorage.setItem('scenery', ele)
      this.$router.push({
        path: '/scenery'
      })
    }
  }
}
</script>
<style scoped lang='less'>
.sousuoPaihang{
  text-align: left;
  padding: 10px 15px 0px 15px;
  .titleTop{
    font-size:16px;
    color:#666;
    margin-bottom: 7px;
  }
  .content{
    height: 160px;
    display: flex;
    flex-direction:column;
    flex-wrap:wrap;
    border-bottom: 1px solid #eee;/*大边框*/
    &>div{
      display:flex;
      color:#333;
      height: 19px;
      line-height:19px;
      padding:10px 0;
      &>div{
        padding-left:5px;
        font-size:16px;
      }
      &>p{
        font-size:16px;
      }
    }
    &>div:first-child,&>div:nth-child(2),&>div:nth-child(3){
      &>div{
        padding-left:5px;
        background-image: url(/static/Sousuo/point.png);
        background-repeat: no-repeat;
        background-position: left bottom 2px;
        background-size: 13px 13px;
      }
      &>p{
        padding-right:20px;
        background-image: url(/static/Sousuo/hot.png);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 13px 13px;
      }
    }
  }
}
</style>
